<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content="宋雨晴">
    <meta name="Keywords" content="考研酒店拼房管理系统">
    <meta name="Description" content="考研酒店拼房管理系统">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link href="../resources/home/css/reservation.css" type="text/css" rel="Stylesheet"/>
<%--    <link href="../resources/home/css/index.css" type="text/css" rel="Stylesheet"/>--%>
    <link href="../resources/home/bootstrap/css/bootstrap.css" type="text/css" rel="Stylesheet"/>
    <link href="../resources/home/css/bootstrap-table.min.css" type="text/css" rel="Stylesheet"/>
    <link href="../resources/home/css/bootstrapValidator.min.css" type="text/css" rel="Stylesheet"/>
    <link href="../resources/home/css/select2.min.css" type="text/css" rel="Stylesheet"/>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <title>酒店管理系统首页</title>
    <style>
        。select2-container {
            text-decoration: 10px;
        }
        .select2-container .select2-selection--single {
            height: 34px!important;
        }
        .select2-container .select2-selection--single:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0/8%), 0 0 8px rgb(102 175 233/60%);
            box-shadow: inset 0 1px 1px rgb(0 0 0/8%), 0 0 8px rgb(102 175 233/60%);
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 34px;
        }
        p {
            margin: 10px 0;
        }
        .back {
            position: sticky;
            position: -webkit-sticky;
            width: 60px;
            height: 60px;
            background-image: url("../resources/home/images/home.png");
            background-repeat:no-repeat;
            background-size:100% 100%;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            /*background-color: red;*/
            border-radius: 50%;
        }
        .back:hover {
            box-shadow: 4px 4px 4px #a8e5d5;
            cursor: pointer;
        }
        #book_win label {
            line-height: 34px;
        }
        #map {
            width: 100%;
            height: 300px;
            border: 1px #bbb solid;
            margin-top: 50px;
        }
        table {
            border: none !important;
        }
        table tr th {
            border: none !important;
        }
        table tr td {
            border: none !important;
        }
    </style>
</head>
<body>
<div id="go_back" class="back" hidden></div>
<!--头部-->
<div id="c_header"></div>
<!--主体内容-->
<section>
    <div id="subject">
        <p style="float:right;">
            <c:if test="${account == null }">
                <a href="../home/login">登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="../home/reg">注册</a>&nbsp;
            </c:if>
            <c:if test="${account != null }">
                <font color="red">欢迎您：${account.name }&nbsp;&nbsp;|&nbsp;&nbsp;</font>
                <a href="account/index">用户中心</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="../home/logout">注销登录 ${account.idCard == null}</a>&nbsp;

                <c:if test="${account.idCard == null}">
                    <script>
                        alert('请先完善个人信息!');
                        window.location.href = 'account/index?tab=info';
                    </script>
                </c:if>
            </c:if>
        </p>
        <div class="floor_con" style="position: relative; text-align: center">
            <h2 class="h2" style="margin-top: 40px;">xxx酒店预约系统</h2>
        </div>
        <div class="room_type_con" style="position: relative; display: none;">
            <img src="../resources/home/images\index_02.jpg" alt="" height="256px" width="1200px">
            <!--遮罩-->
            <ul class="shade_mag">
                <li><img src="../resources/home/images\s_02.png" alt=""></li>
                <li><img src="../resources/home/images\s_01.png" alt=""></li>
            </ul>
        </div>
    </div>

    <!---->
    <!---预约菜单--->
    <div id="due_menu">
        <div class="container-fluid">
            <div class="row floor_con">
                <p class="booking_tab"><span></span>考场选择</p>
                <form id="search-form"  role="form" class="form-horizontal col-xs-12" onsubmit="return false;">
                    <div class="form-group">
                        <label for="place" class="col-xs-3 control-label">考场：</label>
                        <div class="col-xs-6 ">
                            <select id="place" class="form-control"></select>
                        </div>
                        <button type="button" class="btn btn-success" id="search-btn"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜&nbsp;索</button>
                    </div>
                </form>

                <div id="map"></div>
            </div>

            <div class="row room_type_con" style="display: none;">
               <div id="floor_name" style="text-align: center; font-size: 25px; color: rgb(74,74,74); font-weight: bold;">xxx</div>
               <div id="floor_remark" style="text-align: center; font-size: 20px; color: #777777;">xxx</div>
            </div>

            <div class="row floor_con">
                <p class="booking_tab"><span></span>酒店列表</p>
                <table id="floor_table" class="table table-striped"></table>

            </div>

            <div class="row room_type_con" style="display: none;">
                <p class="booking_tab"><span></span>房型列表</p>
                <table id="room_type_table" class="table table-striped"></table>
            </div>

        </div>
        <!--客房-->
<%--        <div id="guest_rooms">--%>
<%--            <div id="pages"></div>--%>
<%--            <!--  -列表菜单 -->--%>
<%--            <div></div>--%>
<%--        </div>--%>
    </div>

    <%--    预约窗口--%>
    <div id="book_win" style="display: none;">
        <form id="book_form" class="form" onsubmit="return false;" style="margin-top: 25px;">
            <input id="floorId" name="floorId" hidden="hidden"/>
            <input id="roomTypeId" name="roomTypeId" hidden="hidden"/>
            <div class="form-group">
                <label for="floorName" class="col-xs-4 col-xs-offset-1 control-label">酒店：</label>
                <div class="col-xs-6 ">
                    <input id="floorName" class="form-control" readonly/>
                </div>
            </div>
            <div class="form-group">
                <label for="roomTypeName" class="col-xs-4 col-xs-offset-1 control-label">房型：</label>
                <div class="col-xs-6 ">
                    <input id="roomTypeName" class="form-control" readonly/>
                </div>
            </div>
            <div class="form-group">
                <label for="price" class="col-xs-4 col-xs-offset-1 control-label">价格（/天）：</label>
                <div class="col-xs-6 ">
                    <input id="price" class="form-control" readonly></input>
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-xs-4 col-xs-offset-1 control-label">联系人姓名：</label>
                <div class="col-xs-6 ">
                    <input id="name" name="name" class="form-control"/>
                </div>
            </div>
            <div class="form-group">
                <label for="idCard" class="col-xs-4 col-xs-offset-1 control-label">联系人身份证号：</label>
                <div class="col-xs-6 ">
                    <input id="idCard" name="idCard" class="form-control"/>
                </div>
            </div>
            <div class="form-group">
                <label for="mobile" class="col-xs-4 col-xs-offset-1 control-label">联系人手机号：</label>
                <div class="col-xs-6 ">
                    <input id="mobile" name="mobile" class="form-control"/>
                </div>
            </div>
            <div class="form-group">
                <label for="arriveDate" class="col-xs-4 col-xs-offset-1 control-label">预计到达时间：</label>
                <div class="col-xs-6 ">
                    <input id="arriveDate" name="arriveDate" class="form-control"/>
                </div>
            </div>
            <div class="form-group">
                <label for="leaveDate" class="col-xs-4 col-xs-offset-1 control-label">预计离开时间：</label>
                <div class="col-xs-6 ">
                    <input id="leaveDate" name="leaveDate" class="form-control"/>
                </div>
            </div>
            <div class="form-group">
                <label for="remark" class="col-xs-4 col-xs-offset-1 control-label">留言：</label>
                <div class="col-xs-6 ">
                    <textarea id="remark" name="remark" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group" style="text-align: center;">
                <button type="submit" class="btn btn-success" onclick="bookOrder()">预定</button>
            </div>
        </form>
    </div>

</section>
<%@include file="../common/footer.jsp" %>
<script src="../resources/home/js/jquery-1.11.3.js"></script>
<script src="../resources/home/js/jquery.form.js"></script>
<script src="../resources/home/bootstrap/js/bootstrap.js"></script>
<script src="../resources/home/js/bootstrap-table.min.js"></script>
<script src="../resources/home/js/bootstrapValidator.min.js"></script>
<script src="../resources/home/js/select2.min.js"></script>
<script src="../resources/home/layer/layer.js"></script>
<script src="../resources/home/laydate/laydate.js"></script>
<script src="../resources/home/js/common.js"></script>
<%--<script src="http://webapi.amap.com/maps?v=1.3&key=dG2bN1KdfGDr5G5DGMtIYYs8bjh41Bou"></script>--%>
<%--<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>--%>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=dG2bN1KdfGDr5G5DGMtIYYs8bjh41Bou"></script>
<script>
    // 当前选中的酒店
    let floor = {};
    let roomType = {};
    // 全局地图对象
    const map = new BMapGL.Map("map");
    // 全局考点
    let place = [];

    // 绑定校验
    $('#book_form').bootstrapValidator({
        fields: {
            name: {
                message: '姓名名验证失败',
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    }
                }
            },
            idCard: {
                validators: {
                    notEmpty: {
                        message: '身份证号码不能为空'
                    },
                    callback: {
                        message: '身份证号码格式错误',
                        callback: function (value, validator) {
                            if (!value) {
                                return true
                            } else return !!isCardNo(value);
                        }
                    }
                }
            },
            mobile: {
                validators: {
                    notEmpty: {
                        message: '手机号不能为空'
                    },
                    regexp: {
                        regexp: /^1\d{10}$/,
                        message: '手机号格式错误'
                    }
                }
            },
            arriveDate: {
                validators: {
                    notEmpty: {
                        message: '到达时间不能为空'
                    }
                }
            },
            leaveDate: {
                validators: {
                    notEmpty: {
                        message: '离开时间不能为空'
                    }
                }
            },
        }
    });
    const bootstrapValidator = $('#book_form').data('bootstrapValidator');

    $(document).ready(function () {
        $("#search-btn").click(function () {
            let placeId = $('#place').val();
            if (placeId == null) {
                layer.msg('请先选择考场，系统将进行智能推荐!');
                return;
            }

            // 获取选中的考点
            let find = place.find(value => value.id == placeId);

            new AjaxRequest('book/matchingFloorByPlaceId', {placeId: placeId}, (res) => {
                let floors = res.rows || [];
                // 刷新酒店表
                $('#floor_table').bootstrapTable('load', floors);

                // 刷新地图
                initMap(find.longitude, find.latitude);

            }).async().execute();

        });

        let lay = layer.load();
        setTimeout(function(){
            layer.close(lay);
        }, 1000);

        let vds = new AjaxRequest('book/listAllPlace', null).execute();
        let rows = vds.rows || [];

        let data = rows.map(v => ({id: v.id, text: v.name, longitude: v.longitude, latitude: v.latitude}));
        // 保存至全局对象
        place = data;
        $("#place").select2({
            language: "zh-CN",
            placeholder: '请选择考点',
            minimumResultsForSearch: -1,
            data: data
        });

        $('#place').val('').select2();

        // 绑定goback
        $('#go_back').click(() => {
            viewFloor();
        });

        // 加载数据表
        initFloorTable();
        initRoomTypeTable();
        initLayDate();
        initMap();
    });

    function initMap(longitude, latitude) {
        longitude = longitude || 116.404;
        latitude = latitude || 39.915;
        // let map = new BMapGL.Map("map");
        // 设置中心点
        let point = new BMapGL.Point(longitude, latitude);
        map.centerAndZoom(point, 14);
        let circle = new BMapGL.Circle(
            point,
            2000,
            {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆
        let marker = new BMapGL.Marker(new BMapGL.Point(longitude, latitude)); // 创建点
        map.clearOverlays();
        map.addOverlay(marker); // 增加中心点
        map.addOverlay(circle); // 绘制区域圆
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        let scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        let zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        map.addControl(zoomCtrl);

        // 绘制酒店位置
        let floorList = $('#floor_table').bootstrapTable('getData');
        floorList.forEach( (v, row, index) => {
            let myIcon = new BMapGL.Icon("../resources/home/images/markers.png", new BMapGL.Size(23, 25), {
                anchor: new BMapGL.Size(10, 25), // 指定定位位置
                imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移使用左侧的图片
            });
            let mt = new BMapGL.Marker(new BMapGL.Point(v.longitude, v.latitude), {icon:myIcon}); // 创建点
            // let mt = new BMapGL.Marker(new BMapGL.Point(v.longitude, v.latitude)); // 创建点
            map.addOverlay(mt);
        });
    }

    function initFloorTable() {
        $('#floor_table').bootstrapTable('destroy').bootstrapTable({
            data: [],
            formatNoMatches: () => '暂无酒店可供选择',
            columns: [{
                field: 'id',
                title: 'ID',
                visible: false
            }, {
                field: 'name',
                title: '酒店名称',
                halign: 'center',
                align: 'center'
            }, {
                field: 'remark',
                title: '酒店简介',
                halign: 'center',
                align: 'center',
                visible: false
            }, {
                field: 'avilableNum',
                title: '剩余房间数',
                halign: 'center',
                align: 'center'
            }, {
                field: 'longitude',
                title: '经度',
                halign: 'center',
                align: 'center'
            }, {
                field: 'latitude',
                title: '纬度',
                halign: 'center',
                align: 'center'
            }, {
                field: 'distance',
                title: '距离',
                halign: 'center',
                align: 'center',
                formatter: function (value) {
                    let _km = m2km(value);
                    if (_km > 2) {
                        return '<font color="#fd5469">' + _km + 'km</font>';
                    }
                    return '<font color="#1e90ff">' + _km + 'km</font>';
                }
            }, {
                field: 'address',
                title: '地址',
                halign: 'center',
                align: 'center'
            }, {
                title: '查看',
                halign: 'center',
                align: 'center',
                formatter: function (value, row, index) {
                    let str = JSON.stringify(row);
                    return '<a class="btn btn-success" onclick="viewRoomType(' + index +  ')">查看房型</a>'
                }
            }]
        });
    }

    function initRoomTypeTable() {
        $('#room_type_table').bootstrapTable('destroy').bootstrapTable({
            data: [],
            formatNoMatches: () => '暂无房型可供选择',
            columns: [{
                field: 'id',
                title: 'ID',
                visible: false
            }, {
                field: 'photo',
                title: '房型',
                halign: 'center',
                align: 'center',
                formatter: function (value) {
                    return '<img style="width: 160px; height: 100px; border-radius: 50%;" src=\"' + value + '\"/>';
                }
            }, {
                field: 'name',
                title: '房型名称',
                halign: 'center',
                align: 'center'
            }, {
                field: 'remark',
                title: '简介',
                halign: 'center',
                align: 'center'
            }, {
                field: 'liveNum',
                title: '可住人数',
                halign: 'center',
                align: 'center'
            }, {
                field: 'bedNum',
                title: '床位数',
                halign: 'center',
                align: 'center'
            }, {
                field: 'avilableNum',
                title: '剩余可预定数量',
                halign: 'center',
                align: 'center',
                formatter: (value => '<span style="text-decoration: underline; color: ' + (value <= 0 ? '#fd5469;': 'rgb(74,144,226);') + '">' + value + '</span>')
            }, {
                field: 'price',
                title: '房价',
                halign: 'center',
                align: 'center',
                formatter: function (value) {
                    return '<font color="red">￥' + value + '</font>'
                }
            }, {
                title: '预约',
                halign: 'center',
                align: 'center',
                formatter: function (value, row, index) {
                    if (Number(row.avilableNum) <= 0)
                        return '<a class="btn btn-danger" disabled="disabled">预约</a>'
                    else
                        return '<a class="btn btn-success" onclick="openBookOrder(' + index + ')">预约</a>'
                }
            }]
        });
    }

    function initLayDate() {
        laydate.render({
            elem: '#arriveDate',
            min: 0
        });
        laydate.render({
            elem: '#leaveDate',
            min: 1
        });
    }

    function viewFloor() {
        $("#go_back").prop("hidden", true);

        $('#floor_name').html('');
        $('#floor_remark').html('');

        $('.floor_con').show();
        $('.room_type_con').hide();
    }

    function viewRoomType(index) {
        // goback
        $("#go_back").prop("hidden", false);

        let select_floor = $('#floor_table').bootstrapTable('getData')[index];
        floor = select_floor;

        $('#floor_name').html(select_floor.name);
        $('#floor_remark').html(select_floor.remark);

        $('.floor_con').hide();
        $('.room_type_con').show();

        new AjaxRequest('book/listRoomTypeByFloorId', {floorId: select_floor.id}, (res) => {
            let roomTypes = res.rows || [];
            $('#room_type_table').bootstrapTable('load', roomTypes);
        }).async().execute();
    }

    function openBookOrder(index) {
        let select_room_type = $('#room_type_table').bootstrapTable('getData')[index];
        if (Number(select_room_type.avilableNum) <= 0) {
            return;
        }
        roomType = select_room_type;

        new AjaxRequest('book/vertify', {}, (res)=>{
            if (!res.status) {
                layer.msg('您尚未登录，请先登录', {time: 2000, icon: 3}, () => window.location.href = 'login');
                return;
            }
            layer.open({
                type: 1,
                title: '预约',
                skin: 'layui-layer-rim', //加上边框
                area: ['500px', 'auto'], //宽高
                content: $('#book_win'),
                maxmin: true,
                success: function(layero, index){
                    $('#floorId').val(floor.id);
                    $('#roomTypeId').val(roomType.id);
                    $('#floorName').val(floor.name);
                    $('#roomTypeName').val(roomType.name);
                    $('#price').val(roomType.price);
                }
            });

        }).async().execute();
    }

    function bookOrder() {
        bootstrapValidator.validate();
        if (!bootstrapValidator.isValid()) {
            return;
        }

        let param = {
            floorId: $('#floorId').val(),
            roomTypeId: $('#roomTypeId').val(),
            name: $('#name').val(),
            idCard: $('#idCard').val(),
            mobile: $('#mobile').val(),
            arriveDate: $('#arriveDate').val(),
            leaveDate: $('#leaveDate').val(),
            remark: $('#remark').val(),
        };
        new AjaxRequest('book/bookOrder', param, (res) => {
            if (res.type && res.type === 'success') {
                layer.msg('预定成功');
                window.location.href = 'account/index?tab=order';
            }
        }).async().execute();
    }

    // 验证身份证号
    function isCardNo(card) {
        let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test(card) === false) {
            return false
        } else {
            return true
        }
    }

    // 验证手机号
    function checkMobile(str) {
        let re = /^1\d{10}$/
        if (re.test(str)) {
            return true;
        } else {
            return false;
        }
    }

</script>
</body>